<template>
  <div class="c-bg-white c-ph24">
    <div class="c-fs26 c-fw-b c-pt28 c-lh">
      相关商品推荐
    </div>
    <div class="c-flex-row c-flexw-wrap c-pb48">
      <div v-for="(item,index) in recommendList" :key="index" class="width1_3 c-bg-white c-pt28" :class="index % 3 == 2 ? '':'c-mr18'" @click="clickShop(item.mgId)">
        <div class="recommend-img c-br4"><img class="c-br4" v-lazy="item.avatar" :key="item.avatar" /></div>
        <div class="c-fs22 c-pt20 c-text-ellipsis2 c-mb10">{{item.name}}</div>
        <price-com :price="item.price" :prodType="12" :optimal="item.optimal" :priceTagClass="'c-fc-sorange c-fs20'" :numberClass="'c-fc-sorange c-fs24'"></price-com>
      </div>
    </div>
  </div>
</template>

<script>
import PriceCom from '@/components/templates/common/priceCom.vue'
export default {
  name: "ShopRecommend",
  components: {
    PriceCom
  },
  props: {
    recommendList: {
      type: Array,
      default: () => []
    },
  },
  methods: {
    clickShop(shopNo) {
      this.$routerGo(this, "push", {
        path: "/mall/shopDetail/shopDetail",
        query: { shopNo: shopNo }
      });
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.width1_3{
  width: 31%;
}
.mr1 {
  margin-right: 3.3%;
}
.recommend-img {
  height: 0;
  width: 100%;
  line-height: 0;
  padding: 0 0 100% 0;
  overflow: hidden;
}
</style>
